<template>
  <div class="">
    <!-- 通用顶部 -->
    <headMain :mensid="'3'" />
    <!-- 主体内容区域 -->
    <div class="menbox">
      <!-- 左边菜单区域 -->
      <div class="mentleftbox">
        <!-- 头像区域 -->
        <div class="mentuserbox">
          <div class="mentuserimg">
            <img :src="base + studentdata.headPortraitUrl" alt="" />
          </div>
          <div class="mentusername">您好，{{ studentdata.studentName }}</div>
          <div class="mentuserid">学号：{{ studentdata.studentNo }}</div>
          <div class="mentuserid">班级：{{ studentdata.organizationName }}</div>
          <div class="mentuserid mentuserids" @click="uploadShow = true"
            >修改头像</div
          >
        </div>
        <!-- 菜单区域 -->
        <div class="mentitembox">
          <div
            class="mentitem"
            v-for="item in mentdata"
            :key="item.id"
            :class="mentid == item.id ? 'mentitems' : ''"
            @click="mentid = item.id"
          >
            <div class="mentionbox">
              <img :src="item.src" alt="" v-if="mentid != item.id" />
              <img :src="item.srcac" alt="" v-else />
            </div>
            {{ item.name }}</div
          >
        </div>
        <!-- 退出登录 -->
        <div class="outlogin" @click="handleLogout">退出登录</div>
      </div>
      <!-- 右侧内容展示区域 -->
      <div class="mentrightbox">
        <!-- 我的收藏夹 -->
        <Folder v-if="mentid == 1" />
        <!--  我的书签-->
        <bookMark v-if="mentid == 2" />
        <!-- 图谱学习记录 -->
        <recordTp v-if="mentid == 3" />
        <!-- 病例学习记录 -->
        <recordBl v-if="mentid == 4" />
        <!-- 修改密码 -->
        <div class="record" v-if="mentid == 5">
          <!-- 标题 -->
          <div class="recordtitle">修改密码</div>
          <!-- 主体内容区域 -->
          <div class="recordmain">
            <div class="mainxg">
              <a-form
                ref="uploadModel"
                :rules="uploadRules"
                :model="uploadForm"
              >
                <a-row style="margin-bottom: 16px">
                  <a-form-item field="oldPassword" label="旧密码">
                    <a-input-password
                      v-model="uploadForm.oldPassword"
                      placeholder="请输入旧密码"
                      :style="{ width: '320px' }"
                      :defaultVisibility="false"
                      allow-clear
                    />
                  </a-form-item>
                  <a-form-item field="newPassword" label="新密码">
                    <a-input-password
                      v-model="uploadForm.newPassword"
                      placeholder="请输入新密码"
                      :style="{ width: '320px' }"
                      :defaultVisibility="false"
                      allow-clear
                    />
                  </a-form-item>
                  <a-form-item field="nnewPassword" label="确认密码">
                    <a-input-password
                      @input="erpassfn"
                      v-model="uploadForm.nnewPassword"
                      placeholder="请输入新密码"
                      :style="{ width: '320px' }"
                      :defaultVisibility="false"
                      allow-clear
                    />
                  </a-form-item>
                  <!--  -->
                  <div class="lc" v-if="byyshow">
                    两次输入密码不一致,请重新输入</div
                  >
                </a-row>
              </a-form>
              <div class="anniu" @click="uploadCheck">确定</div>
            </div>
          </div>
        </div>
        <!-- 意见反馈 -->
        <div class="feabox" v-if="mentid == 6">
          <div class="featitle">意见反馈</div>
          <div class="featitledes"
            >Hi，给出你的意见吧，您的反馈意见是我们持续进步的动力~</div
          >
          <div class="yjfbox">
            <img src="@/assets/images/yjf.png" alt="" class="" />
          </div>
          <div class="texwb">
            <textarea placeholder="请填写意见反馈" v-model="content"></textarea>
          </div>
          <div class="fkan" @click="feedbackAddfn">确定 </div>
        </div>
      </div>
    </div>
    <!-- 修改头像 -->
    <!-- 修改头像 和 手机号   v-if="uploadShow"-->
    <div class="zlboxmain" v-if="uploadShow">
      <div class="zlboxitem">
        <img
          src="@/assets/images/closefn.png"
          alt=""
          class="closefn"
          @click="uploadShow = false"
        />
        <div class="zlboxtitle">修改资料</div>
        <div class="zlboxmainbox">
          <a-form ref="uploadModel" :model="uploadForm">
            <a-row style="margin-bottom: 16px">
              <a-form-item field="mobile" label="头像:">
                <a-upload
                  :custom-request="(option) => customRequest(option)"
                  :fileList="file ? [file] : []"
                  :show-file-list="false"
                  @change="onChange"
                  @progress="onProgress"
                >
                  <template #upload-button>
                    <div
                      :class="`arco-upload-list-item${
                        file && file.status === 'error'
                          ? ' arco-upload-list-item-error'
                          : ''
                      }`"
                    >
                      <div
                        class="arco-upload-list-picture custom-upload-avatar"
                        v-if="file && file.url"
                      >
                        <img :src="file.url" />
                        <div class="arco-upload-list-picture-mask">
                          <IconEdit />
                        </div>
                        <a-progress
                          v-if="
                            file.status === 'uploading' && file.percent < 100
                          "
                          :percent="file.percent"
                          type="circle"
                          size="mini"
                          :style="{
                            position: 'absolute',
                            left: '50%',
                            top: '50%',
                            transform: 'translateX(-50%) translateY(-50%)',
                          }"
                        />
                      </div>
                      <div class="arco-upload-picture-card" v-else>
                        <div class="arco-upload-picture-card-text">
                          <IconPlus />
                          <div style="margin-top: 10px; font-weight: 600"
                            >上传头像</div
                          >
                        </div>
                      </div>
                    </div>
                  </template>
                </a-upload>
              </a-form-item>
            </a-row>
          </a-form>
        </div>
        <div class="zlboxmainment">
          <div class="zlboxqxs" @click="uploadChecks">确定</div>
          <div class="zlboxqx" @click="uploadCancel">取消</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import {
    updatePassword,
    updateOrg,
    organization,
    getUserInfo,
    feedbackAdd,
    updateInfo,
    uploadFile,
  } from '@/api/user';
  import headMain from '@/views/headmain/index.vue';
  import { caseList, favoriteAdd, favoriteDel } from '@/api/case';
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { useRoute } from 'vue-router';
  import useUser from '@/hooks/user';
  import { storeToRefs } from 'pinia';
  import {
    Message,
    Modal,
    TreeNodeData,
    ValidatedError,
  } from '@arco-design/web-vue';
  import { useUserStore } from '@/store';
  import Folder from './folder.vue';
  import bookMark from './bookMark.vue';
  import recordBl from './recordBl.vue';
  import recordTp from './recordTp.vue';
  const userStore = useUserStore();
  const userdata = storeToRefs(userStore);
  const studentdata = ref(userdata);
  const router = useRouter();
  const route = useRoute();
  const caseTypeName = ref(route.query.caseTypeName);
  const base = ref((window as any).config.VUE_APP_IMG_API);
  const mentid = ref(1);
  const mentdata = ref([
    {
      id: 1,
      name: '我的收藏夹',
      src: new URL('@/assets/images/Star 2.png', import.meta.url).href,
      srcac: new URL('@/assets/images/Star 1.png', import.meta.url).href,
    },
    {
      id: 2,
      name: '我的书签',
      src: new URL('@/assets/images/mt2.png', import.meta.url).href,
      srcac: new URL('@/assets/images/mt2ac.png', import.meta.url).href,
    },
    {
      id: 3,
      name: '图谱学习记录',
      src: new URL('@/assets/images/mt3.png', import.meta.url).href,
      srcac: new URL('@/assets/images/mt3ac.png', import.meta.url).href,
    },
    {
      id: 4,
      name: '病例学习记录',
      src: new URL('@/assets/images/mt4.png', import.meta.url).href,
      srcac: new URL('@/assets/images/mt4ac.png', import.meta.url).href,
    },
    {
      id: 5,
      name: '修改密码',
      src: new URL('@/assets/images/mt5.png', import.meta.url).href,
      srcac: new URL('@/assets/images/mt5ac.png', import.meta.url).href,
    },
    {
      id: 6,
      name: '意见反馈',
      src: new URL('@/assets/images/mt6.png', import.meta.url).href,
      srcac: new URL('@/assets/images/mt6ac.png', import.meta.url).href,
    },
  ]);
  const { logout } = useUser();
  const handleLogout = () => {
    logout();
  };
  // 修改密码
  const uploadForm = ref({
    oldPassword: '',
    newPassword: '',
    nnewPassword: '',
  });
  const uploadRules = {
    //  /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!#$%^&*])[\da-zA-Z!#$%^&*]{8,16}$/

    oldPassword: [
      {
        required: true,
        message: '请输入旧密码',
      },
    ],
    newPassword: [
      {
        required: true,
        message: '请输入新密码',
      },
      // {
      //   match: /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[!@#$%^&*?])[^\s]{6,16}$/,
      //   // /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/,
      //   message: '6-16位的,需包含大写字母、小写字母、特殊符号及数字',
      // },
    ],
    nnewPassword: [
      {
        required: true,
        message: '请输入新密码',
      },
      // {
      //   match: /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[!@#$%^&*?])[^\s]{6,16}$/,
      //   message: '6-16位的,需包含大写字母、小写字母、特殊符号及数字',
      // },
    ],
  };
  const byyshow = ref(false);
  const uploadModel = ref();
  const erpassfn = (value) => {
    uploadModel.value.validateField('nnewPassword', (errorMessage) => {
      if (!errorMessage) {
        console.log('通过校验');
        if (uploadForm.value.nnewPassword != '') {
          if (value != uploadForm.value.newPassword) {
            byyshow.value = true;
          } else {
            byyshow.value = false;
          }
        }
      }
    });
  };

  const uploadCheck = () => {
    // if (loading.value) {
    //   done(false);
    //   return;
    // }

    uploadModel.value.validate(
      async (errors: undefined | Record<string, ValidatedError>) => {
        if (!errors && !byyshow.value) {
          updatePassword(uploadForm.value).then((res: any) => {
            if (res.code == 200) {
              Message.success({
                //   content: res.message,
                content: '修改成功!',
              });
              uploadForm.value = {
                oldPassword: '',
                newPassword: '',
                nnewPassword: '',
              };
              byyshow.value = false;

              handleLogout();
            } else {
              Message.success({
                //   content: res.message,
                content: res.message,
              });
            }
          });
        } else {
        }
      }
    );
  };
  const content = ref();
  // 意见反馈
  const feedbackAddfn = () => {
    feedbackAdd({
      userId: studentdata.value.studentId,
      content: content.value,
    }).then((res: any) => {
      if (res.code == 200) {
        Message.success('反馈成功');
        content.value = '';
      }
    });
  };

  const uploadShow = ref(false);

  const onChange = (_, currentFile) => {
    file.value = {
      ...currentFile,
      // url: URL.createObjectURL(currentFile.file),
    };
  };
  const onProgress = (currentFile) => {
    file.value = currentFile;
    // console.log('currentFile', file.value);
  };
  const file = ref();
  const files = ref();
  // 修改头像逻辑
  const customRequest = (option: any) => {
    const { onProgress, onError, onSuccess, fileItem, name, handleRemove } =
      option;
    console.log('上传图像', fileItem.file);
    let formData = new FormData();

    formData.append('file', fileItem.file);
    uploadFile(formData)
      .then((res: any) => {
        if (res.code == 200) {
          onSuccess();
          files.value = res.data;
          console.log('图像上传成功', res.data);
        }
      })
      .catch((err: any) => {
        onError(err);
      });
    return {
      abort: () => {
        console.log('上传已取消');
      },
    };
  };

  const uploadCancel = () => {
    uploadShow.value = false;
  };

  const uploadChecks = () => {
    // 再次调用存进去

    updateInfo({
      headPortraitUrl: files.value,
    }).then((res: any) => {
      if (res.code == 200) {
        Message.success('修改成功');
        const userStore = useUserStore();
        userStore.setInfo({
          headPortraitUrl: files.value, // 更新头像
        });
        uploadShow.value = false;
      } else {
      }
    });
  };
  // 修改头像逻辑完成
</script>

<style scoped>
  .menbox {
    width: 1777px;
    height: 820px;
    margin: 15px auto;
    display: flex;
  }
  .mentleftbox {
    width: 271px;
    height: 820px;
    background: #e8ebee;
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #a3b0c1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 37px 21px;
  }
  .mentrightbox {
    width: 1486px;
    height: 820px;
    border-radius: 10px 10px 10px 10px;
    margin-left: 20px;
  }
  .outlogin {
    font-size: 20px;
    color: #ffffff;
    width: 230px;
    height: 55px;
    line-height: 55px;
    background: linear-gradient(180deg, #748191 0%, #242834 100%);
    border-radius: 6px 6px 6px 6px;
    text-align: center;
    margin-top: 55px;
    cursor: pointer;
  }
  .mentitembox {
    display: flex;
    flex-direction: column;
    margin: 30px 0;
  }
  .mentitem {
    cursor: pointer;
    font-size: 20px;
    color: #2b3750;
    width: 230px;
    height: 55px;
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 6px 6px 6px 6px;
    margin: 5px 0px;
  }
  .mentitems {
    background: #b1becf;
  }
  .mentionbox {
    height: 30px;
    width: 30px;
    margin: 0px 10px;
    display: flex;

    align-items: center;
    justify-content: center;
  }
  .mentuserbox {
    height: 165px;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .mentuserimg {
    width: 80px;
    height: 80px;
    margin-bottom: 15px;
  }
  .mentuserimg img {
    width: 80px;
    height: 80px;
  }
  .mentusername {
    color: #333333;
    font-size: 18px;
  }
  .mentuserid {
    color: #666666;
    font-size: 14px;
    margin: 5px 0;
  }

  .record {
    width: 1486px;
    height: 820px;
    background: #e8ebee;
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #a3b0c1;
    display: flex;
    flex-direction: column;
    padding: 15px 30px;
  }
  .recordtitle {
    font-size: 20px;
    font-weight: 800;
    margin: 10px 0;
  }
  .recordmain {
    height: 700px;
    width: 100%;
    margin: 15px 0;
    position: relative;
  }
  .mainxg {
    position: absolute;
    left: 50%;
    top: 50px;
    transform: translate(-50%, 0);
  }
  .lc {
    color: red;
    font-size: 18px;
    margin-left: 170px;
  }
  .anniu {
    width: 93px;
    height: 50px;
    background: linear-gradient(180deg, #748191 0%, #242834 100%);
    border-radius: 6px 6px 6px 6px;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    color: #ffffff;
    position: absolute;
    left: 45%;
    top: 280px;
    transform: translate(-50%, 0);
    cursor: pointer;
  }
  .feabox {
    width: 1486px;
    height: 820px;
    background: linear-gradient(180deg, #e8ebee 0%, #c8e1fa 100%);
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #a3b0c1;
    display: flex;
    flex-direction: column;
    padding: 20px 0px;
    position: relative;
  }
  .featitle {
    font-weight: bold;
    font-size: 35px;
    color: #000000;
    margin-top: 30px;
    margin-left: 330px;
  }
  .featitledes {
    height: 22px;
    font-size: 22px;
    color: #000000;
    line-height: 22px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-top: 20px;
    margin-left: 330px;
  }
  .yjfbox {
    position: absolute;
    right: 300px;
    top: 2px;
  }
  .yjfbox img {
    width: 343px;
    height: 234px;
  }
  .texwb {
    width: 830px;
    height: 535px;
    background: #ffffff;
    border-radius: 20px 20px 20px 20px;
    position: absolute;
    top: 175px;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .texwb textarea {
    width: 830px;
    height: 535px;
    background: #ffffff;
    border-radius: 20px 20px 20px 20px;
    padding: 20px;
    font-size: 14px;
    color: #999999;
  }
  .fkan {
    width: 93px;
    height: 50px;
    background: linear-gradient(180deg, #748191 0%, #242834 100%);
    border-radius: 6px 6px 6px 6px;
    text-align: center;
    line-height: 50px;
    color: #ffffff;
    position: absolute;
    bottom: 35px;
    right: 325px;
    cursor: pointer;
    font-size: 20px;
  }
  .zlboxqxs {
    width: 93px;
    height: 50px;
    background: linear-gradient(180deg, #748191 0%, #242834 100%);
    border-radius: 6px 6px 6px 6px;
    text-align: center;
    line-height: 50px;
    color: #ffffff;

    cursor: pointer;
    font-size: 20px;
  }
  .mentuserids {
    color: #3595f5;
    cursor: pointer;
  }

  .zlboxmain {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
  }
  .zlboxitem {
    width: 606px;
    height: 380px;
    background: #fafafa;
    border-radius: 20px 20px 20px 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .zlboxitem .closefn {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 9999;
  }
  .zlboxtitle {
    width: 120px;
    margin: 20px auto;
    font-size: 22px;
  }
  .zlboxmainbox {
    margin: 0 auto;
    width: 506px;
    padding: 15px 20px;
  }

  .zlboxmainment {
    margin: 0 auto;
    margin-top: 10px;
    display: flex;
    align-items: center;
    width: 200px;
  }
  .zlboxqx {
    color: #1e657b;
    font-size: 20px;
    width: 93px;
    height: 50px;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #1e657b;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
    cursor: pointer;
  }
  .zlboxqd {
    background-color: #1e657b;
    color: #ffffff;
    font-size: 20px;
    width: 93px;
    height: 50px;
    border-radius: 8px 8px 8px 8px;
    margin: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .zlbox {
    background-color: #fff;
    text-align: center;
    border: 1px solid #818181;
  }

  .zljibenbox {
    width: 600px;
    height: 100px;
    display: flex;
    flex-direction: column;
  }
</style>
